import React, { useContext } from "react";
import { Typography, Container, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { ThemeContext } from "../theme/ThemeProvider";
import { TextDecrypt } from "./TextDecrypt";

const useStyles = makeStyles((theme) => ({
    main: {
        marginTop: "auto",
        marginBottom: "auto",
        textAlign: "center",
        "@media (max-width: 768px)": {
            marginLeft: theme.spacing(4),
        },
    },
    button: {
        // display: "flex",
        flexDirection: "row",
        gap: theme.spacing(2),
        padding: theme.spacing(4),
        justifyContent: "center",
        margin: theme.spacing(1),
        borderRadius: "15rem",
        padding: theme.spacing(2, 2),
        fontWeight: "bold",
        width: "10rem",
        transition: 'transform 0.15s cubic-bezier(0.2, 0, 0.13, 2)',
        // color: theme.palette.foreground.default,
        color: theme.palette.foreground.default,
    },
    exploreButton: {
        backgroundColor: theme.palette.primary.main,
        '&:hover': {
            transform: 'scale(1.1)',
            backgroundColor: theme.palette.primary.dark,
        },
    },
    uploadButton: {
        backgroundColor: theme.palette.secondary.main,
        '&:hover': {
            transform: 'scale(1.1)',
            backgroundColor: theme.palette.secondary.dark,
        },
    },
    userButton: {
        backgroundColor: theme.palette.error.main,
        '&:hover': {
            transform: 'scale(1.1)',
            backgroundColor: theme.palette.error.dark,
        },
    }
}));

export const Content = () => {
    const classes = useStyles();
    const { theme } = useContext(ThemeContext);

    return (
        <Container component="main" className={`${classes.main}`} maxWidth="sm">
            <Typography variant="h2" component="h1" gutterBottom>
                <TextDecrypt text={`这是标题`} />
            </Typography>
            <Typography variant="h5" component="h2" gutterBottom>
                <TextDecrypt text={`这是副标题`} />
            </Typography>
            <Button variant="contained" className={`${classes.button} ${classes.exploreButton}`}>
                按钮1
            </Button>
            <Button variant="contained" className={`${classes.button} ${classes.uploadButton}`}>
                按钮2
            </Button>
            <Button variant="contained" className={`${classes.button} ${classes.userButton}`}>
                按钮3
            </Button>
        </Container>
    );
};
